<template>
	<div class="tpl26-search">
    <!-- 顶部搜索框 -->
    <div class="search-container">
      <a href="javascript:;" class="ico-left" @click="JumpName('item-class-list')">
        <i></i>
        <span>分类</span>
      </a>
      <div class="search-wrapper">
        <div class="icon" @click="searchList">
          <!-- TODO svg换成图片 -->
          <img class="icon_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>
        <!-- TODO 小程序input处理 -->
        <input  @confirm="searchList" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'" />
      </div> 
      <!-- TODO 会员中心路径暂定为member -->
      <a href="javascript:;" class="ico-right" @click="JumpName('member')">
        <i></i>
        <span>会员</span>
      </a> 
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  data() {
    return {
      keyword: ''
    }
  },
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    searchList() {
      this.$JumpName(this, 'item-list', { title: this.keyword })
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    }
  },

  created() {

  }
})
</script>

<style lang='scss'>
 @import "src/styles/mixin";
 .miniprogram-root {
   .tpl26-search {
     box-sizing: border-box!important;
   }
   .search-wrapper .h5-input {
     margin-top: 0;
   }
 }
.tpl26-search{
  background: #fff;
  padding: 20px 20px;
  height: 108px;
  box-sizing: border-box;
  .search-container{
    display: flex;
    >a {
      display: inline-block;
      color: #666;
      padding: 0 10px;
      span {
        font-size: 20px;
        margin-top: 6px;
      }
      &.ico-left{
        padding-right: 2%;
        i{
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/diy/tpl26/class_icon.png');
        }
      }
      &.ico-right{
        padding-left: 2%;
        i{
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/diy/tpl26/user_icon.png');
        }
      }
      i {
        display: block;
        height: 32px;
        width: 30px;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }
    .search-wrapper{
      position:relative;
      flex:1;
      height: 64px;
      border-radius: 35px;
      background: #fff;
      border: 1px solid #efefef;
      .icon {
        position:absolute;
        left:20px;
        top: 14px;
        // top:50%;
        // transform: translateY(-50%);
        color:#999999;
        font-size: 24px;
        margin-right: 10px;
        .icon_search{
          width:32px;
          height:32px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width:100%;
        height: 64px;
        padding:15px 70px;
        border:0;
        background: transparent;
        box-sizing: border-box;
      }
    }
  }  
}

</style>
